<template>
	<view class="line">
		<u-tabs :list="stateSearchFields" @click="clickStateTab"></u-tabs>
		<view class="charts-box">
			<qiun-data-charts 
				type="line"
				:opts="opts"
				:chartData="chartData"
			/>
		</view>
	</view>
</template>

<script>
	import { getLineDustStationData } from '@/api/site'
	export default {
		data () {
			return {
				queryParams: {
					cycleEnum: 'HOUR24',
					searchField: 'aqi'
				},
				stateSearchFields: [
					{
							name: 'AQI',
					}, {
							name: 'PM10',
					}, {
							name: 'PM2.5'
					}, {
							name: 'O3'
					}, {
							name: 'NO2'
					}, {
							name: 'SO2'
					}, {
							name: 'CO'
					},
				],
				chartData: {
					categories: [],
					series: [{
							name: '农科院',
							data: []
						},
						{
							name: '大泉街道',
							data: []
						},
						{
							name: '新城区',
							data: []
						},
						{
							name: '桃园路',
							data: []
						},
						{
							name: '淮塔',
							data: []
						},
						{
							name: '铜山区招生办',
							data: []
						},
						{
							name: '黄河新村',
							data: []
						},
						{
							name: '鼓楼区政府',
							data: []
						}
					]
				},
				opts: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,30,0,15],
					dataLabel: false,
					// enableScroll: true, //显示滚动条
					legend: {
						// float: 'left',
						lineHeight: 26
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 10,
						labelCount: 1.5
					},
					yAxis: {
						gridType: "dash",
						dashLength: 4,
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "custom"
						}
					}
				}
			}
		},
		onLoad () {
		},
		onReady () {
			this.getLineDustStation()
		},
		methods: {
			getLineDustStation () {
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				let query = ''
				for (const k in this.queryParams) {
					query += `${k}=${this.queryParams[k]}&`
				}
				getLineDustStationData(query).then(res => {
					if (res.data.code === 200) {
						const data = res.data.data.line
						let lineData = []
						this.chartData.categories = []
						for (const k in data) {
							this.chartData.categories.push(data[k].time.slice(5))
							lineData.push(Object.values(data[k]))
						}
						// 删除最后一个元素
						lineData.map(item => {
							item.pop()
						})
						for (const k in lineData) {
							this.chartData.series[0].data.push(lineData[k][0])
							this.chartData.series[1].data.push(lineData[k][1])
							this.chartData.series[2].data.push(lineData[k][2])
							this.chartData.series[3].data.push(lineData[k][3])
							this.chartData.series[4].data.push(lineData[k][4])
							this.chartData.series[5].data.push(lineData[k][5])
							this.chartData.series[6].data.push(lineData[k][6])
							this.chartData.series[7].data.push(lineData[k][7])
						}
						uni.hideLoading()
					} else {
						uni.$u.toast('稍后再试')
						uni.hideLoading()
					}
				})
			},
			// 站点对比tab切换
			clickStateTab (item) {
				if (item.name == 'AQI') {
					this.queryParams.searchField = 'aqi'
				} else if (item.name == 'PM2.5') {
					this.queryParams.searchField = 'pm25'
				} else if (item.name == 'PM10') {
					this.queryParams.searchField = 'pm10'
				} else if (item.name == 'O3') {
					this.queryParams.searchField = 'o3'
				} else if (item.name == 'NO2') {
					this.queryParams.searchField = 'no2'
				} else if (item.name == 'SO2') {
					this.queryParams.searchField = 'so2'
				} else if (item.name == 'CO') {
					this.queryParams.searchField = 'co'
				}
				this.getLineDustStation()
			}
		}
	}
</script>

<style lang="scss">
</style>